import Taro , { Component } from '@tarojs/taro'
import postImage from '../../image/post.png'
import { View , Swiper ,SwiperItem ,Image , Input ,Ad } from '@tarojs/components'
import { AtTabs, AtTabsPane  ,AtButton ,AtFloatLayout } from 'taro-ui'

import CarItem from '../../component/CarItem/carItem.js'
import des_icon from '../../image/ic_destination.png'

import DataManager from '../../utils/DataManager.js'
import ListEmptyView from '../../component/LiseEmptyView/listEmptyView.js'
import emptyIcon from '../../image/ic_empty.png'

import {base_url} from "../../network/config";
import {COMMON_CONST} from "../../utils/const";

import './carList.scss'
import BasePage from "../basePage";

let ridingPage = 1;
let driverPage = 1;

export default class carList extends BasePage {
  config = {
    navigationBarTitleText: ''
  }

  constructor() {
    super(...arguments)
    this.state = {
      carBannerList:[],
      postTypeViewShow:false ,
      tabCurrent:0,
      ridingList:[],
      driverList:[],
      inputStartPlace:'',
      inputEndPlace:'',
      bannerHeight:0,
    }
  }

  componentDidMount () {
    Taro.setNavigationBarTitle({
      title: DataManager.getAddressName() + '车列表'
    })

    Taro.eventCenter.on('ridingPost',() => {
      ridingPage = 1;
      this.loadCarList('' , '' , ridingPage , 0);
    })
    Taro.eventCenter.on('driverPost',() => {
      driverPage = 1;
      this.loadCarList('' , '' , driverPage , 1);
    })


    this.loadCarList('' , '' , ridingPage , 0);
    this.loadCarList('' , '' , driverPage , 1);
    this.loadBannerList();
  }

  onPullDownRefresh(){
    ridingPage = 1;
    driverPage = 1;
    this.loadCarList(this.state.inputStartPlace , this.state.inputEndPlace , ridingPage , 0)
    this.loadCarList(this.state.inputStartPlace , this.state.inputEndPlace , driverPage , 1)
    this.loadBannerList()
  }

  onReachBottom(){
    if (this.state.tabCurrent == 0){
      ridingPage ++;
      this.loadCarList(this.state.inputStartPlace , this.state.inputEndPlace , ridingPage , 0)
    } else {
      driverPage ++;
      this.loadCarList(this.state.inputStartPlace , this.state.inputEndPlace , driverPage , 1)
    }
  }

  loadBannerList(){
    let _this = this;

    let url = base_url + 'stateless/banner/bannerList'
    Taro.request({
      url:url,
      data: {
        token:DataManager.getToken(),
        platform:'android_c',
        weixinId:DataManager.getWeiXinId(),
        loginChannel:'c',
        appId:'KC876D98B30UA40CJSNHI689FB33SDW',
        digest : 'dda484557c12febe48139d8f44051c13',
        type:2
      },
      method: 'GET',
      success(res) {
        let banners = [];
        if (res.data.data){
          banners = banners.concat(res.data.data);
        }
        _this.setState({
          carBannerList:banners,
        })
      }
    })
  }

  // type  0人找车  1 车找人
  loadCarList(startPlace , endPlace ,page , type){

    console.log('loadpage------------' + page)

    let _this = this;
    let url = base_url + 'stateless/car/carList'
    Taro.request({
      url:url,
      data: {
        token:DataManager.getToken(),
        platform:'android_c',
        weixinId:DataManager.getWeiXinId(),
        loginChannel:'c',
        appId:'KC876D98B30UA40CJSNHI689FB33SDW',
        digest : 'dda484557c12febe48139d8f44051c13',
        pageNo:page,
        pageSize:COMMON_CONST.LIST_SIZE,
        startAddress:startPlace,
        tagAddress:endPlace,
        type:type
      },
      method: 'GET',
      success(res) {

        if (!res.data || !res.data.data || !res.data.data.list || res.data.data.list.length < 1){
          if (type == 0){
            if (ridingPage > 1){
              ridingPage --;
            }
          } else if (type == 1){
            if (driverPage > 1){
              driverPage --;
            }
          }
        }

        let subList = [];

        if (res && res.data && res.data.data && res.data.data.list){
          if (type == 0){
            if (page == 1){
              subList = res.data.data.list;
            } else {
              subList = _this.state.ridingList.concat(res.data.data.list)
            }
            _this.setState({
              ridingList:subList
            })
            console.log('carlist================---' + JSON.stringify(_this.state.ridingList))

          } else if (type == 1){
            if (page == 1){
              subList = res.data.data.list;
            } else {
              subList = _this.state.driverList.concat(res.data.data.list)
            }
            _this.setState({
              driverList:subList
            })
          }

        }
      },
      fail(){
        if (type == 0){
          if (ridingPage > 1){
            ridingPage --;
          }
        } else if (type == 1){
          if (driverPage > 1){
            driverPage --;
          }
        }
      },
      complete(){
        Taro.stopPullDownRefresh();
      }
    })
  }

  handlePostClick(event){
    this.setState({
      postTypeViewShow:true
    })
  }

  handleRidingPost(){
    Taro.navigateTo({
      url: '/pages/post/ridingPost'
    })
  }

  handleDriverPost(){
    Taro.navigateTo({
      url: '/pages/post/driverPost'
    })
  }

  handleFloatClose(){
    this.setState({
      postTypeViewShow : false
    })
  }

  handleOptionClick = (pos) =>{
    this.setState({
      tabCurrent : pos
    })
  }

  handleStartInput = (e) => {
    this.setState({
      inputStartPlace:e.target.value
    })
  }

  handleEndInput = (e) =>{
    this.setState({
      inputEndPlace:e.target.value
    })
  }

  handleSearch = () =>{
    console.log('...........' + this.state.inputStartPlace + '    ' + this.state.inputEndPlace)
    ridingPage = 1;
    driverPage = 1;
    this.loadCarList(this.state.inputStartPlace , this.state.inputEndPlace,ridingPage,0 );
    this.loadCarList(this.state.inputStartPlace , this.state.inputEndPlace,driverPage,1 );
  }

  handleBannerClick = (bannerData) =>{
    console.log('banner--click =====' + bannerData.businessType + '    ' + bannerData.businessId)
    let businessId = bannerData.businessId;
    let bannerUrl = bannerData.bannerUrl;
    if (businessId){
      if (bannerData.businessType == 2){ // job
        Taro.navigateTo({
          url: `/pages/job/jobDetail?jobId=` + businessId,
        })
      } else if (bannerData.businessType == 3){// car
        Taro.navigateTo({
          url: `/pages/car/carDetail?carId=` + businessId
        })
      } else if (bannerData.businessType == 4){// shop
        Taro.navigateTo({
          url: `/pages/shop/shopDetail?shopId=` + businessId
        })
      }
    }

    if (bannerUrl && (bannerData.businessType == 0 || bannerData.businessType == 1)){
      Taro.navigateTo({
        url: `/pages/common/commonWebPage?webUrl=` + 'https://www.baidu.com' + `&webTitle=` + bannerData.title
      })
    }
  }

  bannerLoad = (e) =>{
    var winWid = Taro.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
    var winHei = Taro.getSystemInfoSync().windowHeight;
    var imgh = e.detail.height;//图片高度
    var imgw = e.detail.width;//图片宽度

    var swiperH = winWid * imgh / imgw + 'px'
    console.log('img------------' + winWid + '    ' + winHei + '       ' + swiperH  )
    this.setState({
      bannerHeight:swiperH
    })
  }

  render() {

    let tabList = [{ title: '人找车' }, { title: '车找人' }]

    let bannerItem = this.state.carBannerList.map(item => {
      return <SwiperItem>
        <Image
          onLoad={this.bannerLoad.bind(this)}
          mode='aspectFit'
          className='carList-banner-item'
          src={item.bannerImage}
          style='height:{{this.state.bannerHeight}};'
          onClick={this.handleBannerClick.bind(this,item)}
        >

        </Image>
      </SwiperItem>
    })

    return (
      <View className='carList-main-container'>
        {this.state.carBannerList.length > 0?<Swiper
          className='carList-banner'
          slideMult='10'
          indicatorColor='#999'
          indicatorActiveColor='#333'
          duration={500}
          interval={2000}
          circular={this.state.carBannerList.length > 1}
          autoplay
          indicatorDots
        >
          {bannerItem}
        </Swiper>:null}
        <View className='carList-divider'></View>
        <View className='carList-search-container-main'>
          <View className='carList-search-container'>
            <Input className='carList-search-input-first' type='text' placeholder='出发地'
                   cursorSpacing={5}  onInput={this.handleStartInput.bind(this)}/>
            <Image className='carList-des-icon' src={des_icon}/>
            <Input className='carList-search-input-second' type='text' placeholder='目的地' cursorSpacing={5}
                   onInput={this.handleEndInput.bind(this)}
            />
          </View>
          <AtButton className='carList-search-button' type='primary' size='small' circle
                    onClick={this.handleSearch.bind(this)}>搜索</AtButton>
        </View>
        <View className='carList-divider'></View>
        {DataManager.getHasShowAd() &&
        <Ad unitId='adunit-1bbdf5b76ec6038d'/>
        }

        <View className='carList-option-container'>
          <AtTabs
            style='width:100%'
            current={this.state.tabCurrent}
            tabList={tabList}
            onClick={this.handleOptionClick.bind(this)}
            swipeable={false}
          >
            <AtTabsPane style='width:50%' current={this.state.tabCurrent} index={0}>
              <View className='carList-single'>
                {this.state.ridingList.length > 0 ? this.state.ridingList.map(item => {
                    return <CarItem carData={item}></CarItem>
                  })
                  :
                  <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon}/>
                }
              </View>
            </AtTabsPane>
            <AtTabsPane style='width:50%' current={this.state.tabCurrent} index={1}>
              <View className='carList-single'>
                {this.state.driverList.length > 0 ? this.state.driverList.map(item => {
                    return <CarItem carData={item}></CarItem>
                  })
                  :
                  <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon}/>
                }
              </View>
            </AtTabsPane>
          </AtTabs>
        </View>
        <AtFloatLayout isOpened={this.state.postTypeViewShow} title='选择您要发布的信息类型' onClose={this.handleFloatClose.bind(this)}>
            <View className='post-item' onClick={this.handleRidingPost.bind(this)}>人找车</View>
            <View className='post-item' onClick={this.handleDriverPost.bind(this)} >车找人</View>
            {/*<View className='post-item' onClick={this.handleGoodsPost.bind(this)} >货找车</View>*/}
            {/*<View className='post-item' onClick={this.handleTransportPost.bind(this)} >车找货</View>*/}
        </AtFloatLayout>

        <View className='post-entry' >
          <Image  src={postImage} style="width:50px; height:50px;position:relative" onClick={this.handlePostClick.bind(this)} />
        </View>

      </View>
    )
  }

}
